<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>svg滤镜详解之feDisplacementMap</title>
</head>
<body>
    <svg width="500" height="300">
        <defs>
           <filter id="filter-ripple">
                <feImage id="f1p" result="pict2" xlink:href="../img/water.png" ></feImage>
                <!-- <feImage result="pict" xlink:href="../img/fj.png" x="0" y="0" width="500" height="300"></feImage> -->
                <feDisplacementMap
                  id="f2p"  
                  scale="0"
                  color-interpolation-filters="sRGB" 
                  xChannelSelector="R" 
                  yChannelSelector="R"  
                  in="SourceGraphic" 
                  in2="pict2">
                </feDisplacementMap>
                <feComposite operator="in" in2="pict2"></feComposite>
                <feComposite in2="SourceGraphic"></feComposite>
          </filter>    
        </defs>
        <!-- <rect x="0" y="0" width="500" height="300" fill="url(#rg)"></rect> -->
        <!-- <rect x="0" y="0" width="500" height="300" style="filter:url(#filter-ripple);"></rect> -->
        <image id="sowImg" xlink:href="../img/fj.png" x="0" y="0" width="500" height="300" ></image>
    </svg>
    <script>
      function brown(){
        var el = document.getElementById("sowImg");
        var startTime = "",continueTime = 2000;
        var elep1 = document.getElementById("f1p");
        var elep2 = document.getElementById("f2p");
        var potinPosition = null;
        el.addEventListener('click',function(event){
          potinPosition = {x:event.pageX,y:event.pageY};
          elep1.setAttribute("x",potinPosition.x);
          elep1.setAttribute("y",potinPosition.y);
          el.setAttribute('filter','url(#filter-ripple)')
          startTime = Date.now();
          fllow();
        });

        function fllow(){
          var currentTime = Date.now() - startTime;
          if(currentTime >= 2000) return;
          var c_w = easeOut(currentTime,500,0,continueTime);
          var c_h = easeOut(currentTime,300,0,continueTime);
          var c_s = easeOut(currentTime,0,20,continueTime);
          elep1.setAttribute("x",potinPosition.x - c_w/2);
          elep1.setAttribute("y",potinPosition.y - c_h/2);
          elep1.setAttribute("width",c_w);
          elep1.setAttribute("height",c_h);
          elep2.setAttribute("scale",c_s);
          window.requestAnimationFrame(fllow);
        };

        function easeOut(t,b,c,d){
          return c - (c-b)*(t/d)
        };
      }

      // brown();
    </script>


</body>
</html>